<template>
  <div class=" p-3">
    <div class="card h-100">
      <div class="card-header text-center">
        发件箱
        <img src="../../assets/mail.jpg" alt="" style="width: 30px;height: 30px;float: right;" data-toggle="modal"
          data-target="#mailsend" @click="mailsendcard()" title="发邮件">
      </div>
      <div class="card-body ">
        <!--第一次发件模态框开始-->
        <div v-if="mailList.length == 0" class="modal fade" style="margin-top: 80px;" id="mailsend" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabelcard">发送邮件</h4>
              </div>
              <div class="modal-body" style="text-align: center">
                <!-- 内容开始 -->
                <div style="text-align: left;"><span>标题 : </span><input onkeyup="this.value=this.value.replace(/\s+/g,'')" required  id="mailsendtitle" type="text" placeholder="请输入标题"><br></div>
                <div style="text-align: left;"><span>内容 : </span><textarea  required  id="mailsendcontent" style="margin-top: 5px;"
                    name="" cols="30" rows="10" placeholder="请输入内容"></textarea><br></div>
                <div style="text-align: left;"><span>收件人邮箱 : </span><input id="mailsendemail" type="text" placeholder="请输入收件人邮箱"><br></div>
                <button style="width: 80px;margin-top: 5px;" @click="fasong('{{sendpeople}}')">发送</button>
                <!-- 内容结束 -->
              </div>
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
        <!-- 模态框结束 -->
        <div class="row" style="margin-top: 5px;" v-for="mail in currentPageData" v-bind:key="mail.sendid">
          <div class="col-2 text-nowarp text-truncate text-danger" v-text="mail.sendtitle"></div>
          <div class="col-6 text-nowarp text-truncate text-body" v-text="mail.sendcontent"></div>
          <div class="col-2 text-nowarp text-truncate" v-text="mail.senddate"></div>
          <!--详情模态框开始-->
          <div class="modal fade" style="margin-top: 80px;" :id="'myModacard'+mail.sendid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabelcard" v-text="mail.sendtitle"></h4>
                </div>
                <div class="modal-body" style="text-align: center">
                  <!-- 内容开始 -->
                  <div style="text-align: left;"><span>发件人:</span>
                    <p style="display: inline-block;" v-text="mail.sendpeople"></p>
                  </div>
                  <div style="text-align: left;"><span>收件人:</span>
                    <p style="display: inline-block;" v-text="mail.recepeople"></p>
                  </div>
                  <div style="text-align: left;"><span>时间:</span>
                    <p style="display: inline-block;" v-text="mail.senddate"></p>
                  </div>
                  <span style="float: left;">内容:&nbsp;</span><p style="float: left;text-align: left;" v-text="mail.sendcontent"></p>
                  <!-- 内容结束 -->
                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
          <!-- 模态框结束 -->
          <!--发件模态框开始-->
          <div class="modal fade" style="margin-top: 80px;" id="mailsend" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabelcard">发送邮件</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                  <!-- 内容开始 -->
                  <div style="text-align: left;"><span>标题 : </span><input onkeyup="this.value=this.value.replace(/\s+/g,'')" required  id="mailsendtitle" type="text" placeholder="请输入标题"><br></div>
                  <div style="text-align: left;"><span>内容 : </span><textarea  required  id="mailsendcontent" style="margin-top: 5px;"
                      name="" cols="30" rows="10" placeholder="请输入内容"></textarea><br></div>
                  <div style="text-align: left;"><span>收件人邮箱 : </span><input id="mailsendemail" type="text" placeholder="请输入收件人邮箱"><br></div>
                  <button style="width: 80px;margin-top: 5px;" @click="fasong(mail.sendpeople,mail.recepeople)">发送</button>
                  <!-- 内容结束 -->
                </div>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
          <!-- 模态框结束 -->
          <div class="text-nowarp">
            <button class="btn btn-danger text-nowarp" data-toggle="modal" :data-target="'#myModacard'+mail.sendid" @click="opencard()">
              <span>查看</span>
            </button>
            <button class="btn btn-danger text-nowarp" @click="shanchu(mail.sendid)">删除</button>
          </div>

        </div>
        <footer style="text-align: center;">
            <button @click="prevPage()">
                上一页
            </button>
            <span>第{{currentPage}}页/共{{totalPage}}页</span>
            <button @click="nextPage()">
                下一页
            </button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mymail",
    data() {
      return {

        mailList: [],
        //分页
       totalPage: 1, // 统共页数，默认为1
       currentPage: 1, //当前页数 ，默认为1
       pageSize: 14, // 每页显示数量
       currentPageData: [] //当前页显示内容
      }
    },

    methods: {
      // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
     setCurrentPageData:function() {
          let begin = (this.currentPage - 1) * this.pageSize;
          let end = this.currentPage * this.pageSize;
          this.currentPageData = this.mailList.slice(begin,end);
      },
      //上一页
      prevPage:function() {
          // console.log(this.currentPage);
          if (this.currentPage == 1) return;
           this.currentPage--;
           this.setCurrentPageData();
      },
      // 下一页
      nextPage:function() {
          if (this.currentPage == this.totalPage)return ;
           this.currentPage++;
           this.setCurrentPageData();
      },
      opencard: function() {
        $("#myModacard").modal({
          backdrop: 'static',
          keyboard: false
        }); //手动开启
      },
      mailsendcard: function() {
        $("#mailsend").modal({
          backdrop: 'static',
          keyboard: false
        }); //手动开启
      },
      huoqudata: function() {
        var than = this;
        var userEmail = window.sessionStorage.getItem('userEmail');
        this.axios.get("http://localhost:9000/selectsender?email=" + userEmail).then(function(response) {
          // console.log(response)
          than.mailList = response.data;
        })
      },
      shanchu: function(id) {
        // alert(id)
        var than = this;
        this.axios.get("http://localhost:9000/dsend?id=" + id).then(function(response) {
          alert("删除成功");
          var userEmail = window.sessionStorage.getItem('userEmail');
          than.axios.get("http://localhost:9000/selectsender?email=" + userEmail).then(function(response) {
            // console.log(response)
            than.mailList = response.data;
          })
          // console.log(response)
        })
      },
      fasong: function() {
        var title = $('#mailsendtitle').val();
        var content = $('#mailsendcontent').val();
        var email = $('#mailsendemail').val();
        var userEmail = window.sessionStorage.getItem('userEmail');
        var date = this.getDate();
        if(title != "" & content != "" & email != ""){
          $.ajax({
            type: 'POST',
            url: "http://localhost:9000/mailinsert",
            data: {
              "recetitle": title,
              "rececontent": content,
              "sendpeople": userEmail,
              "recedate": date,
              "recepeople": email,
              "email": email
            },
            dataType: 'text',
            success: function(data) {
              alert("发送成功")
              document.getElementById("mailsendtitle").value = "";
              document.getElementById("mailsendcontent").value = "";
              document.getElementById("mailsendemail").value = "";
            },
            complete: function() {
              console.log("ajax请求完事，最终操作在这里完成")
            },
          })
        }else{
          alert("请将信息补全后发送....")
        }

        // console.log("发送fajian为-" + fajian);
        // console.log("发送标题为--->" + title);
        // console.log("发送content为--->" + content);
        // console.log("发送email为--->" + email);
        // console.log("发送时间为--->" + date);
        // console.log("发送userEmail为--->" + userEmail);
      },
      getDate: function() { //这里返回时间
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
          " " + date.getHours() + seperator2 + date.getMinutes() +
          seperator2 + date.getSeconds();
        return currentdate;
      },
      //分页
      fenye:function(){
        // console.log(this.mailList);
        // 计算一共有几页
        this.totalPage = Math.ceil(this.mailList.length / this.pageSize);
        // console.log("asdsdsdsdsd->"+this.totalPage)
        // 计算得0时设置为1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
        this.setCurrentPageData();
        // console.log("总页面数为--->"+this.totalPage);
      }

    },
      created:function() {
          this.huoqudata();
      },
      beforeUpdate:function(){
          this.fenye()
        },
  }
</script>

<style>

</style>
